<template>
  <div style="display:flex;align-items: center;flex-direction: column;margin-top: 2rem">
    <img :src="userInfo.profile.avatarUrl" style="width: 2rem;height: 2rem;border-radius: 50%">
    <span style="margin-top: 1rem;font-size: 0.5rem">{{ userInfo.profile.nickname }}</span>
  </div>
</template>

<script>
import {mapState} from "vuex/dist/vuex.mjs";

export default {
  name: "UserInfo",
  computed: {
    ...mapState('user', ['userInfo'])
  }
}
</script>

<style scoped>

</style>